<template>
	<view class="mycoupon">
		<view class="receiving-part" v-for="(item,index) in mycoupon" :key="index" v-if="mycoupon.is_have == 1">
			<view class="receiving-part-left">
				<view class="receiving-part-left-text">
					<text style="font-size: 36rpx; font-weight: 600; color: white;">首月租金5折</text>
				</view>
			</view>
			<view class="receiving-part-right">
				<view class="receiving-part-right-top">
					<view class="receiving-part-right-top-left">
						<view class="receiving-part-right-top-left-connet">
							<text style="font-size: 24rpx; color: white;">固定折扣卷</text>
						</view>
					</view>
					<text style="font-size: 24rpx;">可用于全部商城</text>
				</view>
				<view class="receiving-part-right-bottom">
					<text
						style="margin-left: 10rpx; font-size: 24rpx; line-height: 80rpx; display: block;">可参与首月租金抵扣</text>
					<text
						style="margin-left: 10rpx; font-size: 24rpx; line-height: 80rpx; display: block;">领取后1天有效</text>
					<view class="receiving-buttom" @click="Tousecoupon()">
						<text style="color: red;font-size: 28rpx;">去使用</text>
					</view>
				</view>
			</view>
		</view>
		<view class="mycoupon-bottom" @click="ToReceiving()">
			<text style="font-size: 36rpx;  color: #e5b340;">领取更多好卷></text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mycoupon: ''
			}
		},
		onLoad() {
			this.inspectToken();

			/* uni.getStorage({
				key: 'userinfo',
				success: (res) => {
					uni.request({
						url: this.$apiUrl + 'Activity/getActivity',
						method: 'POST',
						header: {
							token: res.data.token
						},
						complete: (e) => {
							this.mycoupon = e.data.data
							if (e.data.status != 200) {
								uni.showModal({
									title: '提示',
									content: '您还未授权登录，将为您跳转至用户页面，请点击头像登录',
									showCancel: false,
									success(event) {
										if (event.confirm) {
											uni.switchTab({
												url: '/pages/user/user'
											})
										}
									}
								})
							}
						}
					})
				},
				fail() {
					uni.showModal({
						title: '提示',
						content: '您还未授权登录，将为您跳转至用户页面，请点击头像登录',
						showCancel: false,
						success(event) {
							if (event.confirm) {
								uni.switchTab({
									url: '/pages/user/user'
								})
							}
						}
					})
				}
			}) */

		},
		methods: {
			getCouponData(res) {
				uni.request({
					// url: this.$apiUrl + 'Activity/getActivity',
					url: 'https://testtxxzdata.tingxiangzu.com/Douyin/Activity/getActivity',
					method: 'POST',
					header: {
						token: res.token
					},
					complete: (e) => {
						this.mycoupon = e.data.data
						if (e.data.status != 200) {
							uni.showModal({
								title: '提示',
								content: '您还未授权登录，将为您跳转至用户页面，请点击头像登录',
								showCancel: false,
								success(event) {
									if (event.confirm) {
										uni.switchTab({
											url: '/pages/user/user'
										})
									}
								}
							})
						}
					}
				})
			},
			inspectToken() {
				const userinfo = uni.getStorageSync("userinfo");
				if (typeof userinfo === "object" && userinfo.token) {
					this.getCouponData(userinfo);
				} else {
					this.showLoginTips();
				}
			},
			ToReceiving: function() {
				uni.navigateTo({
					url: '/pagesA/receiving/receiving'
				})
			},
			Tousecoupon() {
				uni.navigateTo({
					url: '/pagesA/usecoupon/usecoupon'
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #f7f7f7;
		height: 100%;
	}

	.mycoupon {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		align-content: flex-start;
	}

	.mycoupon-bottom {
		height: 160rpx;
		width: 100%;
		background-color: white;
		position: absolute;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.receiving-part {
		margin-top: 20rpx;
		width: 90%;
		height: 240rpx;
		display: flex;
		justify-content: space-around;
		background-color: white;
		border-radius: 12rpx 0 0 12rpx;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
	}

	.receiving-part-left {
		width: 38%;
		height: 100%;
		background-color: red;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 12rpx 0 0 12rpx;
	}

	.receiving-part-right {
		width: 60%;
		height: 100%;
	}

	.receiving-part-right-top {
		height: 33%;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: left;
	}

	.receiving-part-right-top-left {
		width: 50%;
		height: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.receiving-part-right-top-left-connet {
		width: 92%;
		height: 88%;
		background-color: red;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 12rpx;
	}

	.receiving-part-right-bottom {
		width: 100%;
		height: 67%;
	}

	.receiving-buttom {
		position: relative;
		bottom: 80rpx;
		color: white;
		left: 220rpx;
		width: 36%;
		height: 64rpx;
		border-radius: 24rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border: red solid 2rpx;
	}
</style>
